<template>
  <div class="app">
    <div class="app1">
      <div class="app1-1">
        <img src="./kuang/img/ka-1.png" alt="" width="450" height="400" />
        洞悉快递点
      </div>
      <div class="app1-1">
        <img src="./kuang/img/ka-3.png" alt="" width="450" height="400" />
        召唤跑腿
      </div>
      <div class="app1-1">
        <img src="./kuang/img/ka-2.png" alt="" width="450" height="400" />
        快递送到手中
      </div>
    </div>
    <div class="app2">
      <div class="app2-1">
        <img src="./kuang/img/ka2-1.png" alt="" width="450" height="400" />
        意料之外的下雨天
      </div>
      <div class="app2-2">
        <h2 class="h-1">校园跑腿，为你解决燃眉之急</h2>
        <p>下雨忘记带伞？</p>
        <p>考试忘记带准考证？</p>
        <p>表白忘记拿玫瑰？</p>
        <p>无论你遇到什么问题！</p>
        <p class="app2-2-p4">
          这些都不是问题，发布个小任务，自然有跑腿帮你送过来
        </p>
      </div>
      <div class="app2-1">
        <img src="./kuang/img/ka2-2.png" alt="" width="450" height="400" />
        总有人冒雨前来
      </div>
    </div>
    <div class="app3">
      <div class="app2-2">
        <h2 class="h-1">我的校友</h2>
        <p>刚来学校不熟悉</p>
        <p>想出去玩，找不到同伴</p>
        <p>打篮球不知道有没有场地</p>
        <p>更新实时动态，了解全校大事</p>
        <p class="app2-2-p4">全校都是你的好朋友，我的学校没有陌生人</p>
      </div>
      <div class="app2-2">
        <h2 class="h-1">眼中人</h2>
        <p>小姐姐很漂亮，一见钟情怎么办</p>
        <p>不敢上去要联系方式，好尴尬呀</p>
        <p>小哥哥是不是单身呢，是我喜欢的型</p>
        <p>有点害羞，被拒绝了怎么办</p>
        <p class="app3-2-p4">去眼中人看看吧，也许对方也喜欢你呢</p>
      </div>
      <div class="app2-2">
        <h2 class="h-1">打印店</h2>
        <p>打印简历，文档，找不到打印店</p>
        <p>不想去打印店，要是能用手机打印就好了</p>
        <p>时间来不及，想要快点拿到打印文件</p>
        <p>预约打印，想什么时间拿就什么时间拿</p>
        <p class="app2-2-p4">打印文件不是问题，只有你愿意，随时随地打印文件</p>
      </div>
    </div>
    <div class="app4">
      <ul>
        <li>了解更多</li>
        <li>洞悉系统开发人员</li>
        <li>关于洞悉</li>
        <li>洞悉系统研发过程</li>
      </ul>
      <ul>
        <li> 关注我们</li>
        <li>微信：17634544533</li>
        <li>QQ：282552825</li>
       </ul>
      <ul>
        <li>联系我们</li>
        <li>提出建议</li>
        <li>举报反馈</li>
      </ul>
      <ul>
        <li>我的学校</li>
        <li>学校地址</li>
        <li>学校官网</li>
        <li>师资力量</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      // 版本号
      version: "3.4.0",
    };
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.app {
  // width: 1300px;
  margin-top: 20px;
  .app1,
  .app2,
  .app4,
  .app3 {
    height: 550px;
    background-color: rgb(255, 247, 173);
    min-width: 1800px;
    position: relative;
    .app1-1,
    .app2-1 {
      position: relative;
      width: 500px;
      margin: 20px;
      padding: 0 30px;
      text-align: center;
      font-size: 30px;
      float: left;
    }
    .app2-2 {
      position: relative;
      float: left;
      margin: 20px;
      min-height: 400px;
      // border: 1px solid red;
      width: 500px;
      .h-1 {
        width: 500px;
        height: 60px;
        text-align: center;
      }
      p {
        display: block;
        text-align: center;
        font-size: 25px;
        margin-bottom: 35px;
      }
      .app2-2-p4 {
        color: rgb(50, 146, 66);
        font-size: 25px;
      }
      .app3-2-p4 {
        color: rgb(248, 142, 186);
        font-size: 25px;
      }
    }
    .app4-h1 {
      width: 100%;
      height: 60px;
      text-align: center;
      // border: 1px solid red;

    }
  }
  .app2 {
    background-color: rgb(250, 151, 70);
  }
  .app4 {
    background-color: rgb(220, 243, 168);
    height: 200px;
    ul{
      width: 400px;
      position: relative;
      float: left;
      list-style: none;
      // border: 1px solid red;
    }
    li{
      margin-top:15px ;
    }
    li:hover{
      color: orange;
    }
    li:nth-child(1){
      font-size: 25px;
    }
  }
}
</style>